<template>
  <div class="container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>在售车型</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="newVehicleDialog">新增车型</el-button>
      </div>
      <el-table
        :data="vehicleList"
        stripe
        class="table">
        <el-table-column
          prop="model"
          label="车型">
        </el-table-column>
        <el-table-column
          prop="config"
          label="配置">
        </el-table-column>
        <el-table-column
          prop="color"
          label="可选颜色">
        </el-table-column>
        <el-table-column
          prop="price"
          label="参考价格">
        </el-table-column>
        <el-table-column
          prop="deal"
          label="成交量">
        </el-table-column>
        <el-table-column
          prop="date"
          label="最近交付">
        </el-table-column>
        <el-table-column width="90px">
          <template slot-scope="scope">
            <el-button @click="handleModifyDialog(scope.row)">改价</el-button>
          </template>
        </el-table-column>
        <el-table-column width="90px">
          <template slot-scope="scope">
            <el-button type="primary" @click="handlePurchaseDialog(scope.row)">采购</el-button>
          </template>
        </el-table-column>
        <el-table-column width="90px">
          <template slot-scope="scope">
            <el-button type="danger" @click="tryDelete(scope.row)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </el-card>

      <el-dialog
        title="新增车型"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div>
          <el-form :model="addVehicle" label-position="left" label-width="30%">
            <el-form-item label="车系">
              <el-input v-model="addVehicle.model" style="width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="配置">
              <el-select v-model="addVehicle.config" placeholder="请选择配置">
                <el-option label="高配" value="h"></el-option>
                <el-option label="中配" value="s"></el-option>
                <el-option label="低配" value="l"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="可选颜色">
              <el-select
                v-model="addVehicle.color"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="添加颜色">
                <el-option
                  v-for="item in colorTest"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="指导价">
              <el-input v-model="addVehicle.price" style="width: 90%"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="newVehicle">确 定</el-button>
  </span>
      </el-dialog>

    <el-dialog
      title="修改价格"
      :visible.sync="modifyDialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form :model="modifyPrice" label-position="left" label-width="30%">
          <el-form-item label="型号">
            <el-input v-model="modifyPrice.model" style="width: 90%" disabled></el-input>
          </el-form-item>
          <el-form-item label="配置">
            <el-input v-model="modifyPrice.config" style="width: 90%" disabled></el-input>
          </el-form-item>
          <el-form-item label="修改价格">
            <el-input v-model="modifyPrice.price" style="width: 90%"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="actModifyPrice">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="采购车辆"
      :visible.sync="purchaseDialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form :model="purchaseList" label-position="left" label-width="30%">
          <el-form-item label="车系">
            <el-input v-model="purchaseList.model" style="width: 90%" disabled></el-input>
          </el-form-item>
          <el-form-item label="配置">
            <el-select v-model="purchaseList.config" placeholder="请选择配置" disabled>
              <el-option label="高配" value="h"></el-option>
              <el-option label="中配" value="s"></el-option>
              <el-option label="低配" value="l"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择颜色">
            <el-select
              v-model="purchaseList.color"
              filterable
              default-first-option
              placeholder="选择颜色">
              <el-option
                v-for="item in purchaseColor"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量">
            <el-input-number v-model="purchaseList.num" style="width: 90%"></el-input-number>
          </el-form-item>
          <el-form-item label="总价">
            <el-input v-model="purchaseList.price" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="定金比例">
            <el-input v-model="purchaseList.rate" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="订单类型">
            <el-select v-model="purchaseList.iscommon" style="width: 90%" placeholder="选择订单类型">
              <el-option :label="普通订单" value="普通订单"></el-option>
              <el-option :label="客户订单" value="客户订单"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="purchase">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "VehicleTable",
    props:{
      vehicleList:[],
    },
    data(){
      return{
        /*修改价格*/
        modifyPrice:{
          model:'',
          config:'',
          price:'',
        },
        colorTest:["珍珠白","耀目黑","葡萄酒红","青瓷灰","仙踪绿","钛白"],
        purchaseColor:[],
        /*新增型号*/
        addVehicle:{
          model:'',
          config:'',
          color:[],
          price:'',
        },
        /*采购*/
        purchaseList:{},
        dialogVisible:false,
        modifyDialogVisible:false,
        purchaseDialogVisible:false,
      }
    },
    methods:{
      handlePurchaseDialog(param){
        this.purchaseList={
          model:param.model,
          config:param.config,
          color:'',
          num:0,
          price:'',
          rate:'',
          iscommon:''
        }
        let mydata={
          model:param.model,
          config:param.config,
        }
        this.$axios.$post("get_colors",mydata).then((res)=>{
          console.log(res);
          this.purchaseColor=res;
          console.log(this.purchaseColor);
        })
        this.purchaseDialogVisible=true;
      },
      handleModifyDialog(param){
        this.modifyPrice={
          model:param.model,
          config:param.config,
          price:param.price
        };
        this.modifyDialogVisible=true;
      },
      newVehicleDialog(){
        this.addVehicle={};
        this.dialogVisible=true;
      },
      handleClose(){
        this.dialogVisible=false;
        this.modifyDialogVisible=false;
        this.purchaseDialogVisible=false;
      },
      async purchase(){
        let mydata=this.purchaseList;
        this.$axios.post("/new_vorder",mydata).then((res)=>{
          if(res.data==='1'){
            this.$message({
              type: 'success',
              message: '订购成功!'
            });
            this.$emit("updated");
          }else {
            this.$message({
              type: 'error',
              message: '订购失败！'
            });
          }
        })
        this.$emit("purchased");
        this.handleClose()
      },
      async actModifyPrice(){
        let mydata=this.modifyPrice;
        this.$axios.post("/modify_onsale",mydata).then((res)=>{
          if(res.data==='1'){
            this.$message({
              type: 'success',
              message: '改价成功!'
            });
            this.$emit("updated");
          }else {
            this.$message({
              type: 'error',
              message: '改价失败！'
            });
          }
        })
        this.handleClose();
      },
      async newVehicle(){
        let mydata=this.addVehicle;
        this.$axios.post("/new_vehicle",mydata).then((res)=>{
          if(res.data==='1'){
            this.$message({
              type: 'success',
              message: '添加汽车型号成功!'
            });
            this.$emit("updated");
          }else {
            this.$message({
              type: 'error',
              message: '添加汽车型号失败！'
            });
          }
        })
        this.handleClose();
      },
      async tryDelete(param){
        this.$confirm('此操作将永久删除该汽车型号, 是否继续?', '提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(() => {
          let mydata=param
          console.log(mydata);
          this.$axios.post('/delete_vehicle',mydata).then((res) => {
            if(res.data==='1'){
              this.$emit("updated");
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        this.handleClose();
      }
    }

  }
</script>

<style scoped>
  .table{
    height: 725px;
    width: 100%;
    overflow-y: scroll;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
